<template>
    <div class="app-container">

        <div v-if="this.handleType=='detail'">
            <el-page-header @back="goBack" title="返回" style="font-size:20px ; font-weight: bold" content="商品详情"></el-page-header>
        </div>
        <div v-else>
            <el-page-header @back="goBack" title="返回" style="font-size:20px ; font-weight: bold" content="出售信息"></el-page-header>
            <div style="padding-top:30px; padding-left: 20px">
                    <el-form ref="searchForm" :model="searchForm" style="width:400px">
                        <el-form-item>
                            <el-input autocomplete="on"	v-model="searchForm.searchContext"  placeholder="商品编号/商品名"  style="width:60%;padding-right: 10px;"></el-input>
                            <el-button  type="primary"  @click="salesHandleDataSelect()">确定</el-button>
                        </el-form-item>
                    </el-form>
                <el-divider></el-divider>
            </div>

        </div>

        <div class="app-container">
            <div>
                <el-form ref="form" :model="form" label-width="150px" style="width:98%">
                    <el-divider content-position="left"><span style="color:#009ad6">【商品信息】</span></el-divider>
                    <el-input v-model="form.id" type="hidden" ></el-input>
                    <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="商品编号：">
                            <el-input v-model="form.goodsCode" readonly=true  ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属主题：" >
                            <el-input v-model="form.themeName" readonly=true></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品名称：">
                            <el-input v-model="form.goodsName" readonly=true></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="售价(单件￥)：">
                            <el-input v-model="form.price" readonly=true></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="成本价(单件￥)：">
                            <el-input v-model="form.costPrice" readonly=true></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="利润(单件￥)：">
                            <el-input v-model="form.profitPrice" readonly=true></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="出售量：">
                            <el-input v-model="form.saleNums"   v-on:change="saleNumChangeFun"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="总成本(￥)：">
                            <el-input v-model="form.allCostPrice" readonly=true></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="总净利润(￥)：" readonly=true>
                            <el-input v-model="form.allProfitPrice"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="剩余库存(件)：" >
                            <el-input v-model="form.leftoverNum" readonly=true></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="附件图片：">
                            图片
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="商品备注：" readonly=true>
                            <el-input type="textarea" v-model="form.goodsRemark"> </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                    <el-divider content-position="left"><span style="color:#009ad6">【购物者信息】</span></el-divider>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="联系电话：">
                                <el-input  v-model="form.buyerPhone"> </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="顾客姓名：">
                                <el-input  v-model="form.buyerName"> </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">

                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="需求备注：">
                                <el-input type="textarea" v-model="form.buyerRemark"> </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div v-if="this.handleType=='detail'">
                    </div>
                    <div v-else>
                        <el-row :gutter="20">
                            <el-col :span="8">
                            </el-col>
                            <el-col :span="8">
                                <el-button type="primary" style="margin-left: 10px;" @click="GoodsSaleSubmit()">确认入库</el-button>
                                <el-button type="primary" @click="GoodsCancle()" style="margin-left: 10px;" >打印小票</el-button>
                            </el-col>
                            <el-col :span="8">

                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>

        </div>
    </div>



</template>

<script>

    import request from "../../utils/request";
    import {ElMessage} from "element-plus";
    import { Edit } from '@element-plus/icons';


    export default {
        name: "SalesAdd",
        data(){
            return{
                searchForm:{},
                form:{},
                //////////////
                handleType:""
            }
        },
        created(){
            this.salesDetailInfo();
        },

        methods:{

            salesDetailInfo(){
                // 取到路由带过来的参数
                const routerParams = this.$route.query.id;
                const handleType=this.$route.query.type;
                // 将数据放在当前组件的数据内
                //this.mallInfo.searchMap.mallCode = routerParams;
                //this.keyupMallName()
                this.handleType=handleType;

                request.get("/api/sale/getSaleInfoById",{
                    params:{
                        id:routerParams
                    }
                }).then(resp=>{
                    if(resp.status=='M0200'){
                        this.form=resp.data
                    }
                })
            },

            goBack(){
                this.$router.push('/data')
            },
            //添加
            GoodsSaleSubmit(){
                request.post("/api/sale/addSaleInfo",this.form).then(resp=>{
                    if(resp.status == 'M0200'){
                        ElMessage({
                            message:"入库成功",
                            type:"success"
                        })
                    }else{
                        ElMessage({
                            message:resp.msg    ,
                            type:"error"
                        })
                    }
                })
            },
            //销售量改变。重新计算总成本，总利润，库存量
            saleNumChangeFun(){
                let nums = this.form.saleNums;
                let costPrice=this.form.costPrice;
                let profitPrice= this.form.profitPrice;
                let kc= this.form.num;

                //库存
                if(kc-nums < 0){
                    ElMessage({
                        message:"库存不够",
                        type:"error"
                    })
                    this.form.leftoverNum=0;
                }else {
                    this.form.leftoverNum = kc - nums;
                    if (nums != undefined) {
                        //总成本
                        this.form.allCostPrice = nums * costPrice;
                        //总利润
                        this.form.allProfitPrice = nums * profitPrice;

                    }
                }
            }
            ,
            salesHandleDataSelect(){
                if(this.searchForm.searchContext ==undefined){
                    ElMessage({
                        message:"查询条件不能为空",
                        type:"error"
                    })
                }else {
                    request.get('/api/goods/queryGoodsInfoByParam', {
                        params: {
                            searchContext: this.searchForm.searchContext
                        }
                    }).then(resp => {
                        if (resp.status == 'M0200') {
                            if (resp.data != null) {
                                ElMessage({
                                    message: resp.msg,
                                    type: "success"
                                })
                                this.form = resp.data;
                            } else {
                                ElMessage({
                                    message: resp.msg,
                                    type: "warning"
                                })
                            }
                        } else {
                            ElMessage({
                                message: resp.msg,
                                type: "error"
                            })
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped>

</style>
